@charset "utf-8";
@import "common/reset";
@function c($px) {
    @return $px/2;
}

@function w($px) {
    @return $px/640*100%;
}

@function g($px) {
    @return $px/1136*100%;
}

#fullpage {
    .fp-tableCell {
        vertical-align: top;
    }
    //shouye S 
    .index {
        width: 100%;
        background-size: 100%;
        background-color: skyblue;
        background-image: url(../img/first/kugou-_0010_bc.png);
        font-size: 0;
        div:nth-of-type(n) {
            img {
                width: 100%;
            }
        }
        div:first-child {
            margin-left: w(45);
            margin-top: g(44);
            width: w(103);
            height: g(38);
        }
        div:nth-of-type(2) {
            position: absolute;
            top: g(161);
            left: w(126);
            width: w(381);
            height: g(71);
        }
        div:nth-of-type(3) {
            position: absolute;
            top: g(217);
            left: w(24);
            width: w(576);
            height: g(157);
        }
        div:nth-of-type(4) {
            position: absolute;
            top: g(365);
            left: w(148);
            width: w(352);
            height: g(62);
        }
        div:nth-of-type(5) {
            position: absolute;
            top: g(401);
            left: w(41);
            width: w(77);
            height: g(56);
        }
        div:nth-of-type(6) {
            position: absolute;
            top: g(435);
            left: w(523);
            width: w(58);
            height: g(43);
        }
        div:nth-of-type(7) {
            position: absolute;
            top: g(438);
            left: w(154);
            width: w(341);
            height: g(29);
        }
        div:nth-of-type(8) {
            position: absolute;
            top: g(545);
            left: w(459);
            width: w(43);
            height: g(32);
        }
        div:nth-of-type(9) {
            position: absolute;
            top: g(485.5);
            left: w(388.5);
            width: w(204);
            height: g(222);
            animation-iteration-count: infinite;
        }
        div:nth-of-type(10) {
            position: absolute;
            bottom: g(483);
            right: w(47);
            width: w(59);
            height: g(44);
        }
        div:nth-of-type(11) {
            position: absolute;
            bottom: g(477);
            right: w(132);
            width: w(34);
            height: g(25);
        }
        div:nth-of-type(12) {
            position: absolute;
            bottom: g(146);
            right: w(159);
            width: w(339);
            height: g(421);
        }
        div:nth-of-type(13) {
            position: absolute;
            bottom: g(421);
            right: w(497);
            width: w(94);
            height: g(69);
        }
        div:nth-of-type(14) {
            position: absolute;
            bottom: g(158);
            right: w(459);
            width: w(128);
            height: g(78);
        }
        div:nth-of-type(15) {
            position: absolute;
            bottom: g(398);
            right: w(45);
            width: w(148);
            height: g(82);
        }
        div:nth-of-type(16) {
            position: absolute;
            bottom: g(194);
            right: w(57);
            width: w(94);
            height: g(57);
        }
        div:nth-of-type(17) {
            position: absolute;
            bottom: g(62);
            right: w(234);
            width: w(171);
            height: g(70);
        }
        div:nth-of-type(18) {
            position: absolute;
            top: g(560);
            left: w(459);
            width: w(65);
            height: g(65);
        }
    }
    //shouye E 
    .page1 {
        width: 100%;
        background-size: 100%;
        background-color: skyblue;
        background-image: url(../img/second/kugou-_0002__01.png);
        font-size: 0;
        div:nth-of-type(n) {
            img {
                width: 100%;
                //              height: 100%;
            }
        }
        div:first-child {
            margin-left: w(49);
            margin-top: g(106);
            width: w(556);
            height: g(34);
        }
        div:nth-of-type(2) {
            position: absolute;
            left: w(205);
            top: g(183);
            width: w(250);
            height: g(350);
        }
        div:nth-of-type(3) {
            position: absolute;
            left: w(35);
            top: g(482);
            width: w(112);
            height: g(83);
        }
        div:nth-of-type(4) {
            position: absolute;
            left: w(454);
            top: g(491);
            width: w(64);
            height: g(47);
        }
        div:nth-of-type(5) {
            position: absolute;
            left: w(565);
            top: g(445);
            width: w(78);
            height: g(82);
        }
        div:nth-of-type(6) {
            position: absolute;
            right: w(219);
            bottom: g(393);
            width: w(368);
            height: g(63);
        }
        div:nth-of-type(7) {
            position: absolute;
            right: w(450);
            bottom: g(416);
            width: w(119);
            height: g(28);
        }
        div:nth-of-type(8) {
            position: absolute;
            right: w(219);
            bottom: g(302);
            width: w(367);
            height: g(63);
        }
        div:nth-of-type(9) {
            position: absolute;
            right: w(423);
            bottom: g(323);
            width: w(144);
            height: g(28);
        }
        .melon9 {
            animation-duration: 15s;
        }
        div:nth-of-type(10) {
            position: absolute;
            right: w(219);
            bottom: g(211);
            width: w(367);
            height: g(63);
        }
        div:nth-of-type(11) {
            position: absolute;
            right: w(477);
            bottom: g(234);
            width: w(87);
            height: g(27);
        }
        div:nth-of-type(12) {
            position: absolute;
            right: w(219);
            bottom: g(120);
            width: w(367);
            height: g(63);
        }
        div:nth-of-type(13) {
            position: absolute;
            right: w(474);
            bottom: g(143);
            width: w(89);
            height: g(28);
        }
        div:nth-of-type(14) {
            position: absolute;
            right: w(14);
            bottom: g(304);
            width: w(104);
            height: g(122);
        }
        div:nth-of-type(15) {
            position: absolute;
            right: w(6);
            bottom: g(236);
            width: w(74);
            height: g(74);
        }
        div:nth-of-type(16) {
            position: absolute;
            right: w(14);
            bottom: g(186);
            width: w(75);
            height: g(53);
        }
        div:nth-of-type(17) {
            position: absolute;
            right: w(34);
            bottom: g(133);
            width: w(69);
            height: g(47);
        }
        div:nth-of-type(18) {
            position: absolute;
            right: w(24);
            bottom: g(70);
            width: w(65);
            height: g(61);
        }
        div:nth-of-type(19) {
            position: absolute;
            right: w(83);
            bottom: g(83);
            width: w(83);
            height: g(92);
        }
        //      .melon {
        //          width: 180px;
        //          height: 180px;
        //          background-color: red;
        //          transition: all 1s ease-in-out;
        //          position: absolute;
        //          top: 0;
        //          left: 0;
        //      }
        //              .my_bc_black {
        //                  background-color: black;
        //              }
    }
    .page2 {
        background: url("../img/page1/bg.jpg") no-repeat left top;
        background-size: 100% 100%;
        .question_txt {
            width: 100%;
            font-size: 8px;
            color: #fff;
            line-height: c(40px);
            text-align: center;
            position: absolute;
            top: c(104px);
            span {
                padding: 0 c(100px) 0 0;
            }
        }
        .question_img {
            width: w(212);
            height: c(234px);
            position: absolute;
            top: c(275px);
            z-index: 2;
            img {
                width: 100%;
            }
        }
        .cloud1 {
            width: w(112);
            height: c(86px);
            position: absolute;
            top: c(479px);
            left: w(33);
            img {
                width: 100%;
            }
        }
        .cloud2 {
            width: w(64);
            height: c(47px);
            position: absolute;
            top: c(489px);
            left: w(451);
            img {
                width: 100%;
                opacity: 0.8;
            }
        }
        .cloud3 {
            width: w(111);
            height: c(82px);
            position: absolute;
            top: c(443px);
            left: w(563);
            img {
                width: 100%;
                opacity: 0.3;
            }
        }
        .cloud4 {
            width: w(84);
            height: c(62px);
            position: absolute;
            top: c(418px);
            left: w(194);
            img {
                width: 100%;
            }
        }
        .cloud5 {
            width: w(64);
            height: c(47px);
            position: absolute;
            top: c(461px);
            left: w(389);
            img {
                width: 100%;
                opacity: 0.8;
            }
        }
        .note1 {
            width: w(65);
            height: c(61px);
            position: absolute;
            bottom: c(91px);
            left: w(572);
            img {
                width: 100%;
            }
        }
        .note2 {
            width: w(69);
            height: c(47px);
            position: absolute;
            bottom: c(148px);
            left: w(561);
            img {
                width: 100%;
            }
        }
        .note3 {
            width: w(75);
            height: c(53px);
            position: absolute;
            bottom: c(197px);
            left: w(570);
            img {
                width: 100%;
            }
        }
        .note4 {
            width: w(74);
            height: c(74px);
            position: absolute;
            bottom: c(258px);
            left: w(570);
            img {
                width: 100%;
            }
        }
        .note5 {
            width: w(101);
            height: c(109px);
            position: absolute;
            bottom: c(332px);
            left: w(546);
            img {
                width: 100%;
            }
        }
        .dog {
            width: w(83);
            height: c(92px);
            position: absolute;
            bottom: c(80px);
            right: w(80);
            img {
                width: 100%;
            }
        }
        .question_bg {
            width: c(367px);
            height: c(63px);
            background: url("../img/page1/select_normal.png") no-repeat left top;
            background-size: 100% 100%;
            padding: c(10px) 0 0;
            position: absolute;
            left: w(58);
            p {
                font-weight: bold;
                font-size: 6.6px;
                margin: 0 0 0 c(16px);
                span {
                    padding: 0 c(12px) 0 0;
                }
            }
        }
        .active {
            background: url("../img/page1/select_on.png") no-repeat left top;
            background-size: 100% 100%;
        }
        .questionA {
            bottom: c(390px);
        }
        .questionB {
            bottom: c(299px);
        }
        .questionC {
            bottom: c(208px);
        }
        .questionD {
            bottom: c(117px);
        }
        &.active .dog {
            animation-name: zoomInUp;
        }
        &.active .note {
            animation-name: zoomInUp;
        }
        &.active .question_bg {
            animation-name: zoomInLeft;
        }
        &.active .cloud {
            animation-name: swing;
        }
        &.active .question_img {
            animation-name: zoomInUp;
        }
    }
    //  内页3
    .page3 {
        background: url("../img/page1/bg.jpg") no-repeat left top;
        background-size: 100% 100%;
        .question_txt {
            width: 100%;
            font-size: 8px;
            color: #fff;
            line-height: c(40px);
            text-align: center;
            position: absolute;
            top: c(104px);
            span {
                padding: 0 0 0 8px;
            }
        }
        .question_img {
            width: w(333);
            height: c(255px);
            position: absolute;
            top: c(266px);
            z-index: 2;
            img {
                width: 100%;
            }
        }
        .cloud1 {
            width: w(112);
            height: c(86px);
            position: absolute;
            top: c(479px);
            left: w(33);
            img {
                width: 100%;
            }
        }
        .cloud2 {
            width: w(64);
            height: c(47px);
            position: absolute;
            top: c(489px);
            left: w(451);
            img {
                width: 100%;
                opacity: 0.8;
            }
        }
        .cloud3 {
            width: w(111);
            height: c(82px);
            position: absolute;
            top: c(443px);
            left: w(563);
            img {
                width: 100%;
                opacity: 0.3;
            }
        }
        .cloud4 {
            width: w(84);
            height: c(62px);
            position: absolute;
            top: c(418px);
            left: w(194);
            img {
                width: 100%;
            }
        }
        .cloud5 {
            width: w(64);
            height: c(47px);
            position: absolute;
            top: c(461px);
            left: w(389);
            img {
                width: 100%;
                opacity: 0.8;
            }
        }
        .note1 {
            width: w(65);
            height: c(61px);
            position: absolute;
            bottom: c(91px);
            left: w(572);
            img {
                width: 100%;
            }
        }
        .note2 {
            width: w(69);
            height: c(47px);
            position: absolute;
            bottom: c(148px);
            left: w(561);
            img {
                width: 100%;
            }
        }
        .note3 {
            width: w(75);
            height: c(53px);
            position: absolute;
            bottom: c(197px);
            left: w(570);
            img {
                width: 100%;
            }
        }
        .note4 {
            width: w(74);
            height: c(74px);
            position: absolute;
            bottom: c(258px);
            left: w(570);
            img {
                width: 100%;
            }
        }
        .note5 {
            width: w(101);
            height: c(109px);
            position: absolute;
            bottom: c(332px);
            left: w(546);
            img {
                width: 100%;
            }
        }
        .dog {
            width: w(83);
            height: c(92px);
            position: absolute;
            bottom: c(80px);
            right: w(80);
            img {
                width: 100%;
            }
        }
        .question_bg {
            width: c(367px);
            height: c(63px);
            background: url("../img/page1/select_normal.png") no-repeat left top;
            background-size: 100% 100%;
            padding: c(10px) 0 0;
            position: absolute;
            left: w(58);
            p {
                font-weight: bold;
                font-size: 6.6px;
                margin: 0 0 0 c(16px);
                span {
                    padding: 0 c(12px) 0 0;
                }
            }
        }
        .active {
            background: url("../img/page1/select_on.png") no-repeat left top;
            background-size: 100% 100%;
        }
        .questionA {
            bottom: c(390px);
        }
        .questionB {
            bottom: c(299px);
        }
        .questionC {
            bottom: c(208px);
        }
        .questionD {
            bottom: c(117px);
            p {
                font-size: 5px;
            }
        }
        &.active .dog {
            animation-name: zoomInUp;
        }
        &.active .note {
            animation-name: zoomInUp;
        }
        &.active .question_bg {
            animation-name: flipInX;
        }
        &.active .cloud {
            animation-name: swing;
        }
    }
    //  好友评价页面
    .evaluate {
        background: url("../img/page1/bg.jpg") no-repeat left top;
        background-size: 100% 100%;
        .logo {
            width: w(103);
            height: c(38px);
            position: absolute;
            left: w(45);
            top: c(44px);
            a {
                display: block;
                img {
                    width: 100%;
                }
            }
        }
        .evaluate_dog {
            width: c(173px);
            height: c(173px);
            position: absolute;
            top: c(118px);
            img {
                width: 100%;
            }
        }
        .evaluate_tit1 {
            width: c(321px);
            height: c(32px);
            position: absolute;
            top: c(302px);
            img {
                width: 100%;
            }
        }
        .evaluate_tit2 {
            width: c(476px);
            height: c(29px);
            position: absolute;
            top: c(361px);
            img {
                width: 100%;
            }
        }
        .evaluate_tit3 {
            width: c(315px);
            height: c(23px);
            position: absolute;
            top: c(480px);
            left: w(40);
            img {
                width: 100%;
            }
        }
        .evaluate_tit4 {
            width: c(126px);
            height: c(22px);
            position: absolute;
            top: c(518px);
            left: w(41);
            img {
                width: 100%;
            }
        }
        .evaluate_tit5 {
            width: c(479px);
            height: c(23px);
            position: absolute;
            bottom: c(311px);
            left: w(72);
            img {
                width: 100%;
            }
        }
        .evaluate_00 {
            width: c(167px);
            height: c(56px);
            position: absolute;
            top: c(537px);
            right: w(84);
            opacity: 0;
            img {
                width: 100%;
            }
        }
        .evaluate_70 {
            width: c(132px);
            height: c(56px);
            position: absolute;
            top: c(605px);
            left: w(78);
            opacity: 0;
            animation-delay: 1s;
            img {
                width: 100%;
            }
        }
        .evaluate_90 {
            width: c(178px);
            height: c(56px);
            position: absolute;
            top: c(633px);
            left: w(222);
            opacity: 0;
            animation-delay: 2s;
            img {
                width: 100%;
            }
        }
        .evaluate_95 {
            width: c(190px);
            height: c(56px);
            position: absolute;
            top: c(683px);
            right: w(61);
            opacity: 0;
            animation-delay: 3s;
            img {
                width: 100%;
            }
        }
        &.active .evaluate_hous{
            animation-name: fadeInUp;
        }
        .evaluate_txt {
            width: w(499);
            height: c(75px);
            position: absolute;
            left: w(68);
            bottom: c(218px);
            textarea {
                width: 100%;
                height: 100%;
                resize: none;
                border-radius: c(6px);
                background: transparent;
                border: c(2px) solid #fff;
            }
        }
        a {
            display: block;
            border-radius: c(10px);
            color: #384000;
            font-size: 15px;
            text-align: center;
            line-height: c(47px);
        }
        .sub_btn {
            background: #deff00;
            width: c(134px);
            height: c(47px);
            position: absolute;
            bottom: c(152px);
            left: w(151);
            box-shadow: 3px 3px #4e580e;
        }
        .sub_btn_active {
            background: #a7a7a7;
            box-shadow: 3px 3px #494949;
        }
        .play_btn {
            background: #deff00;
            width: c(138px);
            height: c(47px);
            position: absolute;
            bottom: c(152px);
            right: w(159);
            box-shadow: 3px 3px #4e580e;
        }
        .play_btn_active {
            background: #a7a7a7;
            box-shadow: 3px 3px #494949;
        }
        .share_mask {
            display: none;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.9);
            position: absolute;
            top: 0;
            left: 0;
            .share_dog {
                width: w(168);
                height: c(166px);
                position: absolute;
                top: c(284px);
                img {
                    width: 100%;
                }
            }
            .share_txt {
                width: w(442);
                height: c(33px);
                position: absolute;
                top: c(492px);
                img {
                    width: 100%;
                }
            }
            .share_close {
                position: absolute;
                top: c(12px);
                right: c(12px);
                .my_close {
                    font-size: 20px;
                    color: #d5d5d5;
                }
            }
        }
    }
}
@media only screen and (min-height:532px) and (max-height: 567px) {
    #fullpage .index {
        div:first-child {
            margin-top: g(44);
            height: g(38);
        }
         div:nth-of-type(2) {
            position: absolute;
            top: g(161);
            height: g(71);
        }
        div:nth-of-type(3) {
            position: absolute;
            top: g(217);
            height: g(157);
        }
        div:nth-of-type(4) {
            position: absolute;
            top: g(365);
            height: g(62);
        }
        div:nth-of-type(5) {
            position: absolute;
            top: g(401);
            height: g(56);
        }
        div:nth-of-type(6) {
            position: absolute;
            top: g(435);
            height: g(43);
        }
        div:nth-of-type(7) {
            position: absolute;
            top: g(438);
            height: g(29);
        }
        div:nth-of-type(8) {
            position: absolute;
            top: g(545);
            height: g(32);
        }
        div:nth-of-type(9) {
            position: absolute;
            top: g(485.5);
            height: g(222);
            animation-iteration-count: infinite;
        }
        div:nth-of-type(10) {
            position: absolute;
            bottom: g(483);
            height: g(44);
        }
        div:nth-of-type(11) {
            position: absolute;
            bottom: g(477);
            height: g(25);
        }
        div:nth-of-type(12) {
            position: absolute;
            bottom: g(146);
            height: g(421);
        }
        div:nth-of-type(13) {
            position: absolute;
            bottom: g(421);
            height: g(69);
        }
        div:nth-of-type(14) {
            position: absolute;
            bottom: g(158);
            height: g(78);
        }
        div:nth-of-type(15) {
            position: absolute;
            bottom: g(398);
            height: g(82);
        }
        div:nth-of-type(16) {
            position: absolute;
            bottom: g(194);
            height: g(57);
        }
        div:nth-of-type(17) {
            position: absolute;
            bottom: g(62);
            height: g(70);
        }
        div:nth-of-type(18) {
            position: absolute;
            top: g(560);
            height: g(65);
        }
    }
}

@media only screen and (min-height:519px) and (max-height: 531px) {
    #fullpage .index {
        div:first-child {
            margin-top: g(31);
            height: g(25);
        }
         div:nth-of-type(2) {
            position: absolute;
            top: g(128);
            height: g(58);
        }
        div:nth-of-type(3) {
            position: absolute;
            top: g(204);
            height: g(143);
        }
        div:nth-of-type(4) {
            position: absolute;
            top: g(352);
            height: g(49);
        }
        div:nth-of-type(5) {
            position: absolute;
            top: g(388);
            height: g(43);
        }
        div:nth-of-type(6) {
            position: absolute;
            top: g(422);
            height: g(30);
        }
        div:nth-of-type(7) {
            position: absolute;
            top: g(425);
            height: g(16);
        }
        div:nth-of-type(8) {
            position: absolute;
            top: g(532);
            height: g(19);
        }
        div:nth-of-type(9) {
            position: absolute;
            top: g(472.5);
            height: g(209);
            animation-iteration-count: infinite;
        }
        div:nth-of-type(10) {
            position: absolute;
            bottom: g(470);
            height: g(31);
        }
        div:nth-of-type(11) {
            position: absolute;
            bottom: g(464);
            height: g(12);
        }
        div:nth-of-type(12) {
            position: absolute;
            bottom: g(133);
            height: g(408);
        }
        div:nth-of-type(13) {
            position: absolute;
            bottom: g(408);
            height: g(56);
        }
        div:nth-of-type(14) {
            position: absolute;
            bottom: g(145);
            height: g(65);
        }
        div:nth-of-type(15) {
            position: absolute;
            bottom: g(385);
            height: g(69);
        }
        div:nth-of-type(16) {
            position: absolute;
            bottom: g(181);
            height: g(44);
        }
        div:nth-of-type(17) {
            position: absolute;
            bottom: g(49);
            height: g(57);
        }
        div:nth-of-type(18) {
            position: absolute;
            top: g(547);
            height: g(52);
        }
    }
}

@media only screen and (min-height:518px) and (max-height：518.5px) {
    #fullpage .index {
        div:first-child {
            margin-top: g(30);
            height: g(24);
        }
         div:nth-of-type(2) {
            position: absolute;
            top: g(127);
            height: g(57);
        }
        div:nth-of-type(3) {
            position: absolute;
            top: g(203);
            height: g(142);
        }
        div:nth-of-type(4) {
            position: absolute;
            top: g(351);
            height: g(48);
        }
        div:nth-of-type(5) {
            position: absolute;
            top: g(387);
            height: g(42);
        }
        div:nth-of-type(6) {
            position: absolute;
            top: g(421);
            height: g(29);
        }
        div:nth-of-type(7) {
            position: absolute;
            top: g(424);
            height: g(15);
        }
        div:nth-of-type(8) {
            position: absolute;
            top: g(531);
            height: g(18);
        }
        div:nth-of-type(9) {
            position: absolute;
            top: g(471.5);
            height: g(208);
            animation-iteration-count: infinite;
        }
        div:nth-of-type(10) {
            position: absolute;
            bottom: g(469);
            height: g(30);
        }
        div:nth-of-type(11) {
            position: absolute;
            bottom: g(463);
            height: g(11);
        }
        div:nth-of-type(12) {
            position: absolute;
            bottom: g(132);
            height: g(407);
        }
        div:nth-of-type(13) {
            position: absolute;
            bottom: g(407);
            height: g(55);
        }
        div:nth-of-type(14) {
            position: absolute;
            bottom: g(144);
            height: g(64);
        }
        div:nth-of-type(15) {
            position: absolute;
            bottom: g(384);
            height: g(68);
        }
        div:nth-of-type(16) {
            position: absolute;
            bottom: g(180);
            height: g(43);
        }
        div:nth-of-type(17) {
            position: absolute;
            bottom: g(48);
            height: g(56);
        }
        div:nth-of-type(18) {
            position: absolute;
            top: g(546);
            height: g(51);
        }
    }
}